<template>
    <div class="loading-box">
        <slot></slot>
        <div class="bg" v-if="loading">
            <div class="loading-gif"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            loading:{
                type:Boolean,
                required:true
            }
        }
    }
</script>

<style scoped lang="less">
    @keyframes loading
    {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .loading-box{
        position: relative;
        color: #999;
        .bg{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9;
            background: rgba(255,255,255,.4);
            .loading-gif{
                position: absolute;
                top: 50%;
                left: 50%;
                width: 20px;
                height: 20px;
                margin: -10px 0 0 -10px;
                background-size: 100% 100%;
                background-image: url("./loading.svg");
                animation: loading linear infinite 1s;
            }
        }
    }
</style>
